<template>
  <div class="internal">
    <navbar :text="text"></navbar>
    <div class="content">
      <div class="title">{{ info.title }}</div>
      <div class="from">{{ info.from }}</div>
      <div class="time">{{ info.time }}</div>
      <img :src="info.img" alt="" class="imgs" />
      <p class="context">{{ info.context }}</p>
      <img
        :src="
          save
            ? '	https://cdn7.axureshop.com/demo/1763441/images/%E8%AF%A6%E7%BB%86%E9%A1%B5/u4466.png'
            : 'https://cdn7.axureshop.com/demo/1763441/images/%E8%AF%A6%E7%BB%86%E9%A1%B5/u4465.png'
        "
        alt=""
        @click="saveAction"
        class="save"
      />
    </div>
  </div>
</template>

<script>
import navbar from "@/components/navbar.vue";
import axios from "axios";
// import { addAbortSignal } from "stream";
import { mapState } from "vuex";
export default {
  components: {
    navbar,
  },
  data() {
    return {
      text: "",
      id: "",
      info: {},
      save: null,
    };
  },
  // computed: {
  //   ...mapState("user", ["save"]),
  // },
  methods: {
    async saveAction() {
      // this.$store.commit("user/setsave");
      // //   this.save = !this.save;
      // let time1 = Date.now();

      // 删除
      if (this.save) {
        console.log(this.info);
        const res = await axios.delete("/api/collect", {
          headers: {
            Authorization: "Bearer " + localStorage.getItem("token"),
          },
          params: {
            goodsID: this.info._id,
          },
        });
        this.save = false;
        // console.log(res);
      } else {
        // 添加
        console.log(this.info._id);
        const res = await axios.post(
          "/api/collect",
          { method: "post", goodsID: this.info._id },
          {
            headers: {
              Authorization: "Bearer " + localStorage.getItem("token"),
            },
          }
        );
        // console.log(res);
        this.save = true;
      }
    },
  },
  // 渲染文章
  created() {
    this.text = this.$route.params.text;
    this.id = this.$route.params.id;
    // console.log(this.id);
    try {
      axios
        .request({
          method: "post",
          url: "/api/newsinfo/allnewsinfo",
        })
        .then((res) => {
          // console.log(res);
          res.data.datas.forEach((item) => {
            if (item._id == this.id) {
              this.info = item;
              // console.log(item);
            }
          });
        });
    } catch (error) {
      console.log(error);
    }
  },
  // 查询这条数据是否已经收藏
  updated() {
    // console.log(this.info._id);
    try {
      axios
        .get("/api/collect/one", {
          headers: {
            Authorization: "Bearer " + localStorage.getItem("token"),
          },
          params: {
            goodsID: this.info._id,
          },
        })
        .then((res) => {
          // console.log(res.data);
          if (res.data.state) {
            this.save = true;
          }
        });
    } catch (error) {
      console.log(error);
    }
  },
};
</script>

<style lang="scss" scoped>
@function vw($px) {
  @return ($px/375) * 100vw;
}
.content {
  width: 100%;
  position: relative;
  top: 46px;
  z-index: 1;
  height: calc(100% - vw(46));
  background-color: #fff;
  overflow: auto;
  &::-webkit-scrollbar {
    display: none;
  }
  .title {
    font-family: "MicrosoftYaHei", "微软雅黑 Regular", "微软雅黑";
    font-weight: 400;
    font-style: normal;
    font-size: vw(17);
    color: #333;
    position: absolute;
    left: vw(10);
    top: vw(10);
  }
  .from {
    position: absolute;
    left: vw(10);
    top: vw(50);
    font-family: "微软雅黑";
    font-weight: 400;
    font-style: normal;
    font-size: vw(12);
    color: #999999;
  }
  .time {
    position: absolute;
    left: vw(130);
    top: vw(50);
    font-family: "微软雅黑";
    font-weight: 400;
    font-style: normal;
    font-size: vw(12);
    color: #999999;
  }
  .imgs {
    width: vw(318);
    height: vw(274);
    background-size: contain;
    position: absolute;
    top: vw(70);
    left: 50%;
    transform: translateX(-50%);
  }
  .context {
    position: absolute;
    top: vw(365);
    font-size: vw(15);
    color: #333;
    display: block;
    letter-spacing: vw(1);
    text-indent: 2em;
  }
  .save {
    position: absolute;
    top: vw(710);
    width: vw(30);
    height: vw(30);
    right: vw(30);
  }
}
</style>
